
function renderHtml(params) {
  new Vue({
    el: '#cat_template',
    data: {
      catList: [],
      catMap: new Object(),
      catDataList: [[], [], []],
      catSelected: [null, null, null],
      catKeywords: '',
      classifyAttrs: [],
      form: {
        ifCanSelfPick: false,
        fareStyle: 'FREE',
        fareFee: null,
        categoryId: '',
        minQuantity: 1,
        inventory: 999,
        categoryName: ''
      },
      fareStyle: [
        { label: '包邮', value: 'FREE' },
        { label: '统一运费', value: 'FIXED' }
      ],
      ifCanSelfPick: [
        { label: '是', value: true },
        { label: '否', value: false }
      ],
      fromShopName: params.fromShopName,
      forum: params.forum,
      toShopName: params.toShopName,
      loading: false,
      searchDataList: [[], [], []],
      searchSelected: [null, null, null],
      searchPiker: false
    },
    mounted () {
      this.initData()
    },
    methods: {
      initData(index = 0, tradeId = 0) {
        const _this = this
        this.loading = true
        chrome.runtime.sendMessage({ 'cmd': 'getFormData', 'msg': '/category/operate/list', 'data': { tradeId: tradeId } }, function(data) {
          _this.loading = false
          if (data.data.length > 0) {
            const list = data.data.map(v => {
              v.childs ? null : v.childs = []
              return v
            })
            if (index < 3) {
              _this.catDataList.splice(index, 1, list)
            } 
          } else {
            _this.catKeywords = _this.catSelected.map(v => v.tradeName).join('/')
            _this.getAttrs(tradeId)
            _this.pickerHide()
          }
        })
      },
      getAttrs(id) {
        const _this = this
        chrome.runtime.sendMessage({ 'cmd': 'getFormData', 'msg': '/category/attribute/select', 'data': { tradeId: id } }, function(datas) {
          if (datas && datas.data && datas.data.length > 0) {
            _this.classifyAttrs = datas.data.filter(v => v.isRequired === 1).map(v => {
              return { ...v, myValue: '' }
            })
          } else {
            _this.classifyAttrs = []
          }
        })
      },
      getCatDataSource(index, cat) {
        this.catSelected.splice(index - 1, 1, cat)
        this.initData(index, cat.tradeId)
        
        let temp_i = index
        //清空第三级
        for(; (temp_i + 1) < this.catDataList.length; temp_i++) {
          this.catDataList.splice(temp_i + 1, 1, [])
        }
        //清空所选
        this.catSelected.splice(index, this.catSelected.length - index)
        const lastCategory = this.catSelected[this.catSelected.length - 1]
        this.form.categoryId = lastCategory.id
        this.form.categoryName = this.catSelected.map(v => v.tradeName).join(',')
      },
      pickerShow() {
        $('#industry').slideDown('fast')
        $('.picker-icon').css({ transform: 'rotate(180deg)' })
      },
      pickerHide() {
        $('#industry').slideUp('fast')
        $('.picker-icon').css({ transform: 'rotate(0)' })
      },
      changeAttributeValues(val) {
        if (val.target.checked) {
          for (var variable in this.classifyAttrs) {
            if (this.classifyAttrs[variable].attributeName == val.target.name) {
              if (this.classifyAttrs[variable].myValue instanceof Array) {
                this.classifyAttrs[variable].myValue.push(val.target.value)
              } else {
                this.classifyAttrs[variable].myValue = []
                this.classifyAttrs[variable].myValue.push(val.target.value)
              }
            }
          }
        }
      },
      submitData() {
        //进行表单验证 设置参数之后开始爬取
        const _this = this
        const result = this.checkForm()
        if (result.status) {
          let attributeValues = []
          this.classifyAttrs.forEach(element => {
            attributeValues.push({
              categoryAttributeId: element.id,
              productAttributeValue: element.myValue ?　(element.myValue.constructor === Array ? element.myValue.join(',') : element.myValue) : '-',
              productAttributeName: element.attributeName.trim()
            })
          })
          let query = {..._this.form, attributeValues: attributeValues}
          $('#yhby_gather').attr('disabled','disabled').css('background-color','gray')
          chrome.runtime.sendMessage({ cmd: 'gather', url: location.href, msg: query })
          layer.close(params.layerIndex)
        } else {
          layer.alert(result.msg)
        }
      },
      checkForm() {
        if (this.form.fareStyle === 'FIXED' && !this.form.fareFee) return { status: false, msg: '请输入运费' }
        if (!this.form.categoryId || !this.form.categoryName) return { status: false, msg: '请选择类目' }
        return { status: true }
      },
      dialog() {
        chrome.runtime.sendMessage({ 'cmd': 'getTemplate', 'url': '/templates/tips.html' },function(tempData) {
          layer.open({
            type: 1,
            title: '选填说明',
            shadeClose: false,
            content: tempData
          })
        })
      },
      search() {
        const _this = this
        this.catSelected = [null, null, null]
        this.catDataList = [[], [], []]
        this.form.categoryId = ''
        this.form.categoryName = ''
        if (_this.catKeywords) {
          this.searchPiker = true
          chrome.runtime.sendMessage({ 'cmd': 'getFormData', 'msg': '/category/operate/search', 'data': { tradeName: _this.catKeywords } }, function(datas) {
            if (datas.code === 200 && datas.data.length > 0) {
              const list_1 = datas.data
              const list_2 = list_1[0].childs.length > 0 ? list_1[0].childs : []
              const list_3 = list_2.length > 0 ? list_2[0].childs : []
              _this.searchDataList = [list_1, list_2, list_3]
              _this.searchSelected = _this.searchDataList.map(v => v[0])
            }
          })
        } else {
          this.searchPiker = false
          this.initData()
        }
        this.pickerShow()
      },
      getSearchDataSource(index, search) {
        this.searchSelected.splice(index - 1, 1, search)
        this.searchDataList[index] = search.childs
        let temp_i = index
        // 清空第三级
        for(; (temp_i + 1) < this.searchDataList.length; temp_i++) {
          this.searchDataList.splice(temp_i + 1, 1, [])
        }
        // 清空选项的所有下级选择内容
        this.searchSelected.splice(index, this.searchSelected.length - index)
        // 判断下级数量为空 此项为最后一项
        if (search.childs.length === 0) {
          const lastCategory = this.searchSelected[this.searchSelected.length - 1]
          this.form.categoryId = lastCategory.id
          this.form.categoryName = this.searchSelected.map(v => v.tradeName).join(',')
          this.catKeywords = this.searchSelected.map(v => v.tradeName).join('/')
          this.getAttrs(search.tradeId)
          this.pickerHide()
          this.searchPiker = false
          this.initData()
        }
      }
    }
  })
}